<!--礼卡主页面-->
<template>
<div class="main">
    <div class="top">
        <el-row>
            <el-col :span="10">
                <div class="logo">
                    <el-button type="primary" icon="el-icon-back" @click="showMainPage">&nbsp;&nbsp;{{$t("giftcard.returnBtnName")}}&nbsp;&nbsp;</el-button>
                </div>
            </el-col>
            <el-col :span="14">
            </el-col>
        </el-row>
    </div>
    <div class="center">
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark"></div>
            </el-col>
        </el-row>
        <el-row :gutter="20" style="height:60%;width:60%;">
            <el-col :span="24" style="margin-bottom:50px;">
                <div style="margin-top: 15px;">
                    <el-autocomplete v-model="likeKeyWord" :fetch-suggestions="queryLikeGiftCardsEvent" :placeholder="$t('giftcard.searchCardsTip')" @select="handleSelectCardEvent" class="input-with-select" style="width:100%" suffix-icon="el-icon-search">
                    </el-autocomplete>
                </div>
            </el-col>
            <el-col :span="12">
                <div @click="showSaleGiftCardPage">
                    <el-card shadow="always" class="nav" style="min-height:180px;background-image: linear-gradient( 135deg, #ABDCFF 10%, #0396FF 100%);cursor: pointer;">
                        {{$t("giftcard.route.saleCardMenuName")}}
                    </el-card>
                </div>
            </el-col>
            <el-col :span="12">
                <div @click="showGiftcardReportPage">
                    <el-card shadow="always" class="nav" style="min-height:180px;background-image: linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%);cursor: pointer;">
                        {{$t("giftcard.route.cardReportMenuName")}}
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>
</div>
</template>

<script>
import {
    likeShopGiftCards
} from '../../api/api';
export default {
    data() {
        return {
            select: '',
            input5: '',
            likeKeyWord: ""
        };
    },
    mounted() {},
    methods: {
        showMainPage() {
            this.$router.push({
                path: '/home'
            });
        },
        showSaleGiftCardPage() {
            //显示销售礼卡页面
            this.$router.push({
                path: '/giftcard/salecard'
            });
        },
        showGiftcardReportPage() {
            //显示礼卡报表页面
            this.$router.push({
                path: '/giftcard/report'
            });
        },
        queryLikeGiftCardsEvent(queryString, cb) {
            console.log(queryString);
            //判断queryString是否为空
            //如果为空，则直接返回
            if (typeof queryString == "undefined" || queryString == null || queryString == "") {
                var results = [];
                cb(results);
                return;
            }
            let para = {
                keyWord: queryString
            };
            likeShopGiftCards(para).then(res => {
                let {
                    msg,
                    code
                } = res;
                if (code !== "0") {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                } else {
                    var results = res.data;
                    for (let i = 0; i < results.length; i++) {
                        var item = results[i];
                        item.value = this.$t('giftcard.route.saleCard.form.cardNo') + item.cardNo + "," + this.$t('giftcard.route.saleCard.form.clientName') + item.clientName + "," + this.$t('giftcard.route.saleCard.form.clientPhone') + item.clientPhone;
                    }
                    cb(results);
                }
            });
        },
        handleSelectCardEvent(item) {
            this.likeKeyWord = item.cardNo;
            this.$router.push({
                name: 'giftcard_detail',
                params: {
                    cardId: item.id
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~scss_vars';

.main {
    background-color: #012547;
    display: grid;
    grid-template-rows: 60px auto;
    color: #ffffff;
}

.top {
    background-color: #014171;
    padding: 0px 20px;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav {
    display: flex;
    justify-content: Center;
    align-items: Center;
    font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    font-size: 48px;
    color: #ffffff;
}

.logo {
    display: flex;
    justify-content: left;
    align-items: Center;
    height: 60px;
    font-size: 26px;
}

.userinfo {
    display: flex;
    justify-content: left;
    align-items: Center;
    text-align: right;
    float: right;
    height: 60px;
}

.el-select .el-input {
    width: 130px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}
</style>
